<template>
    <!--退款页面-->
    <view class="service-card">
            <view class="service-up">
                <view>
                    <u-avatar :src='services.supplierDate?services.supplierDate.shopLogo[0].url:srcimg' size='40' class='avartar-item'>
                    </u-avatar>
                </view>
                <view class="company-info">
                   {{services.supplierDate?services.supplierDate.enterpriseName:'默认店铺名'}}
                </view>
            </view>
            <view class="service-content">
                <view class="service-img-left">
                    <view class="img">
                        <image :src="services.image" class="imgItem"></image>
                    </view>
                </view>
                <view class="service-content-right">
                <view class="title">
                        {{services.serverName}}
                </view>
                <view class="desc">
                    {{services.serverInstruction}}
                </view>

                <view class="price">
                    {{Number(services.originalAmount).toFixed(2)}}
                </view>
                </view>

            </view>
    </view>
        
    
</template>


<script>
export default {
    props: {

        serviceInfo: {
            type: Object,
            default:()=>{}
        }

    },

    data () {
        return {
            srcimg: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
            services:{}

        }
    },
    mounted() {
        
        this.services = this.serviceInfo

      
        //  if(this.services.image){
             
        //      this.image = JSON.parse(this.services.mainImage)[0].url

        //  }
    },
    
}
</script>


<style lang="less" scoped>
.service-card{
    .service-up{
        // margin-bottom: 12px;
        display: flex;
        align-items: center;
        .company-info{
            color: #333;
            font-size: 15px;
            margin-left: 10px;
        }

    }

    .service-content{
        margin-top: 12px;
        display: flex;
        // align-items: center;
        .service-img-left{
            margin-right: 15px;
            .img{
                //  width: 76px;
                // height: 76px;
                margin-top: 2px;
            .imgItem{
                width: 76px;
                height: 76px;
               border-radius: 6px;
                
            }
            }

        }

        .service-content-right{
            .title{
                font-size: 15px;
                color: #333;
                font-weight: 500;
                margin-bottom: 5px;
            }
            .desc{
                color: #999;
                font-size: 13px;
            }
            .price{
                margin-top: 15px;
                color: #FE542F;
            }
        }
    }

}

</style>